<template>
  <el-card class="box-card" style="margin-bottom:20px;">
  <div class="clearfix header">
    <el-button style="float: right" type="success" @click="hAddText()"><i class="el-icon-edit"></i> 新增试题</el-button>
  </div>
  <el-form ref="form" :model="form" label-width="80px" class="demo-ruleForm">
    <el-row :gutter="10">
      <el-col :span="6">
        <el-form-item label="学科" prop="subjectID">
          <el-select style="width:100%;" v-model="form.subjectID" placeholder="请选择学科">
            <el-option v-for="item in subjectsList" :key="item.id" :label="item.subjectName" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="试题类型" prop="questionType">
          <el-select v-model="form.questionType" placeholder="请选择试题类型">
            <el-option label="单选" value="1"></el-option>
            <el-option label="多选" value="2"></el-option>
            <el-option label="简单" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="题目备注" prop="remarks">
          <el-input v-model="form.remarks"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="二级目录" prop="catalogID">
          <el-select v-model="form.catalogID" placeholder="请选择目录">
            <el-option v-for="item in muluLists" :key="item.id" :label="item.directoryName" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="难度" prop="difficulty">
          <el-select v-model="form.difficulty" placeholder="请选择难度范围">
            <el-option label="简单" value="1"></el-option>
            <el-option label="一般" value="2"></el-option>
            <el-option label="困难" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="企业简称" prop="shortName">
          <el-input v-model="form.shortName"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="标签" prop="tags">
          <el-select v-model="form.tags" multiple :multiple-limit="2" placeholder="请选择标签">
            <el-option v-for="item in labelLists" :key="item.id" :label="item.tagName" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="方向" prop="direction">
          <el-select v-model="form.direction" placeholder="请选择活动区域">
            <el-option label="o2o" value="o2o"></el-option>
            <el-option label="外包服务" value="外包服务"></el-option>
            <el-option label="企业服务" value="企业服务"></el-option>
            <el-option label="互联网金融" value="互联网金融"></el-option>
            <el-option label="企业咨询" value="企业咨询"></el-option>
            <el-option label="互联网" value="互联网"></el-option>
            <el-option label="电子商务" value="电子商务"></el-option>
            <el-option label="其他" value="其他"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="城市" prop="province">
          <el-row :gutter="0">
            <el-col :span="12">
              <el-select v-model="form.province" placeholder="请选择城市">
                <el-option v-for="item in provincialLists" :key="item" :label="item" :value="item"></el-option>
              </el-select>
            </el-col>
            <el-col :span="11" style="float:right;">
              <el-select  v-model="form.city" placeholder="请选择县区">
                <el-option v-for="item in cityLists" :key="item" :label="item" :value="item"></el-option>
              </el-select>
            </el-col>
          </el-row>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="关键词" prop="keyword">
          <el-input v-model="form.keyword"></el-input>
        </el-form-item>
        <el-form-item label="录入人" prop="creatorID">
          <el-select v-model="form.creatorID" placeholder="请选择录入人">
            <el-option v-for="item in Managerlist" :key="item.id" :label="item.username" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="float:right">
          <el-button  :loading="removeLoading" @click="resetForm('form')">清除</el-button>
          <el-button type="primary" :loading="searchLoading" @click="hsearch()">搜索</el-button>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
  <el-tabs v-model="activeName" type="card" @tab-click="htabsClick">
    <el-tab-pane label="全部" name="allTables">
      <!-- v-if="alertText !== ''" :title="alertText"-->
    </el-tab-pane>
    <el-tab-pane label="待审核" name="awaitStatusTables"></el-tab-pane>
    <el-tab-pane label="已通过" name="allowStatusTables"></el-tab-pane>
    <el-tab-pane label="已拒绝" name="noStatusTables"></el-tab-pane>
    <el-alert
        type="info"
        class="alert"
        :closable="false"
        show-icon
      >当前共计查询到 {{total_count}} 条数据
    </el-alert>
     <!-- 数据列表 -->
      <el-table
        :data="tableData"
        v-loading="tablesLoading"
        border
        fit
        highlight-current-row
        style="width: 100%">
        <el-table-column align="center" label="试题编号" width="100">
            <template slot-scope="scope">
              <span>{{scope.row.id}}</span>
            </template>
        </el-table-column>
        <el-table-column align="center" label="学科" width="100">
          <template slot-scope="scope">
            <span>{{scope.row.subject}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="目录" width="100">
          <template slot-scope="scope">
            <span>{{scope.row.catalog}}</span>
          </template>
        </el-table-column>
        <el-table-column label="题型" align="center" width="100">
          <template slot-scope="scope">
             <span v-if="scope.row.questionType == 1">单选</span>
            <span v-if="scope.row.questionType == 2">多选</span>
            <span v-if="scope.row.questionType == 3">简答</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="题干" width="250">
          <template slot-scope="scope">
            <div v-html="scope.row.question"></div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="录入时间" width="200">
          <template slot-scope="scope">
            <span>{{scope.row.addDate | parseTimeByString}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="难度" width="100">
          <template slot-scope="scope">
             <span v-if="scope.row.difficulty == 1">简单</span>
            <span v-if="scope.row.difficulty == 2">一般</span>
            <span v-if="scope.row.difficulty == 3">困难</span>
          </template>
        </el-table-column>
         <el-table-column align="center" label="录入人" width="100">
          <template slot-scope="scope">
            <span>{{scope.row.creator}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="审核状态" width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.chkState==0">待审核</span>
            <span v-else-if="scope.row.chkState==1">通过</span>
            <span v-else-if="scope.row.chkState==2">拒绝</span>
          </template>
        </el-table-column>
         <el-table-column align="center" label="审核意见" width="200">
          <template slot-scope="scope">
            <span>{{scope.row.chkRemarks}}</span>
          </template>
        </el-table-column>
         <el-table-column align="center" label="审核人" width="100">
          <template slot-scope="scope">
            <span>{{scope.row.chkUser}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="发布状态" width="120">
          <template slot-scope="scope">
            <span v-if="scope.row.publishState==1">已发布</span>
            <span v-else-if="scope.row.publishState==0">已下架</span>
            <span v-else>待发布</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          fixed="right"
          label="操作"
          width="250">
          <template slot-scope="scope">
            <el-button type="primary" size="medium"
            :disabled="false"
            class="anniu" @click="hPreview(scope.row)">预览</el-button>
            <el-button type="primary" size="medium" class="anniu" :disabled="!scope.row.chkState==0" :style="!scope.row.chkState==0 ? 'color:#8D9195':''" @click="hReviewQuestion(scope.row)">审核</el-button>
            <el-button type="primary" size="medium" :style="!scope.row.publishState==1 ? '':'color:#8D9195'" class="anniu" :disabled="scope.row.publishState==1" @click="hModifyQuestion(scope.row)">修改</el-button>
            <el-button type="primary" size="medium" class="anniu"
            @click="upChange(scope.row)" :disabled="false">{{scope.row.publishState==1 ?'下架':'上架'}}</el-button>
            <el-button
                class="anniu"
                v-if="scope.row.status!='deleted'"
                size="medium"
                type="danger"
                @click="removeQuestion(scope.row)"
                :style="!scope.row.publishState==1 ? '':'color:#8D9195'"
                :disabled="scope.row.publishState==1"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    <!-- end -->
    <!-- 分页 -->
    <div class="pagination" style="float:right;">
      <div class="pages">
        <el-pagination
          background
          @size-change="hSizeChange"
          @current-change="hCurrentChange"
          :current-page="form.page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total_count">
        </el-pagination>
      </div>
    </div>
    <!-- end -->
    <!-- 预览的对话框 -->
    <el-dialog title="题目预览" :visible.sync="seeDialog" width="60%">
      <el-card class="box-card" shadow="never" style="border:0px; margin-buttom:15px;">
        <el-row :gutter="20" style="margin-top:-15px;">
          <el-col :span="6">【题型】：
            <span v-if="questionRes.questionType == 1">单选</span>
            <span v-if="questionRes.questionType == 2">多选</span>
            <span v-if="questionRes.questionType == 3">简答</span>
          </el-col>
          <el-col :span="6">【编号】：{{questionRes.id}}</el-col>
          <el-col :span="6">【难度】：
            <span v-if="questionRes.difficulty == 1">简单</span>
            <span v-if="questionRes.difficulty == 2">一般</span>
            <span v-if="questionRes.difficulty == 3">困难</span>
          </el-col>
          <el-col :span="6">【标签】：{{questionRes.tags}}</el-col>
        </el-row>
        <el-row :gutter="20" style="margin-top:15px;">
          <el-col :span="6">【学科】：{{questionRes.subjectName}}</el-col>
          <el-col :span="6">【目录】：{{questionRes.directoryName}}</el-col>
          <el-col :span="6">【方向】：{{questionRes.direction}}</el-col>
        </el-row>
        <hr style="margin-top:10px;" />
        <el-row :gutter="20" style="margin-top:15px;margin-buttom:10px;">
          <el-col :span="12">【题干】：</el-col>
        </el-row>
        <el-row :gutter="20" style="margin-top:15px;margin-buttom:10px;">
          <el-col :span="12" style="color:blue;">
            <div v-html="questionRes.question"></div>
          </el-col>
        </el-row>
          <el-row :gutter="20" style="margin-top:15px;margin-buttom:10px;">
            <el-col :span="12" :style="questionRes.questionType == 3 ?'display:none':'display:block'">
              <span v-if="questionRes.questionType == 1">单选</span>
              <span v-if="questionRes.questionType == 2">多选</span>
              题选项：(以下选中的为正确答案)
            </el-col>
          </el-row>
          <el-radio-group v-if="questionRes.questionType == 1" :value="1" :style="questionRes.questionType == 3 ?'display:none':'display:block'">
            <el-radio v-for="item in questionRes.options"
            :key="item.id" :label="item.isRight">{{item.title}}</el-radio>
          </el-radio-group>
          <el-checkbox-group v-if="questionRes.questionType == 2" :value="[1]">
            <el-checkbox style="display:block; margin-top:5px" v-for="item in questionRes.options"
            :key="item.id" :label="item.isRight">{{item.title}}</el-checkbox>
          </el-checkbox-group>
          <hr style="margin-top:10px;" />
        <el-row :gutter="20" style="margin-top:15px;margin-buttom:10px;">
          <el-col :span="12">
            【参考答案】：
            <el-button type="danger" @click="key=!key" :disabled="!questionRes.videoURL">{{questionRes.videoURL ? '视频答案预览':'无视频解析'}}</el-button>
            <div v-if="questionRes.videoURL && key">
              <video :src="questionRes.videoURL" poster preload controls style="width:300px;hight:400px"></video>
            </div>
          </el-col>
        </el-row>
        <hr style="margin-top:10px;" />
        <el-row :gutter="20" style="margin-top:15px;margin-buttom:10px;">
          <el-col :span="12">【答案解析】：
            <span v-html="questionRes.answer" style="display:inline-block"></span>
          </el-col>
        </el-row>
        <hr style="margin-top:10px;" />
        <el-row :gutter="20" style="margin-top:15px;margin-buttom:10px;">
          <el-col :span="12">【题目备注】：{{questionRes.remarks}}</el-col>
        </el-row>
      </el-card>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="medium" @click="seeDialog = false">关闭</el-button>
      </div>
    </el-dialog>
    <!-- 预览的对话框end -->
    <!-- 审核的对话框 -->
    <el-dialog title="题目审核" :visible.sync="choiceDialog" style="width:70%;margin-left:10%">
      <el-form :model="choiceForm">
        <el-radio-group v-model="choiceForm.chkState" style="margin-bottom:15px">
          <el-radio style="float:left" :label="1">通过</el-radio>
          <el-radio style="float:left" :label="2">拒绝</el-radio>
        </el-radio-group>
        <el-input
          type="textarea"
          :rows="2"
          placeholder="请输入内容"
          v-model="choiceForm.chkRemarks">
        </el-input>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="choiceDialog = false">取 消</el-button>
        <el-button type="primary" @click="changeExamineQuestion()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 审核的对话框end -->
  </el-tabs>
</el-card>
</template>

<script>
// 引入时间过滤器 是全局的
// import { parseTimeByString } from '@/filters/index.js'
// choice精选题库列表 重名可以起别名的形式进行调用
import { choice, detail, choiceCheck, choicePublish, remove } from '@/api/hmmm/questions'
// 引入学科管理api
import { list } from '@/api/hmmm/subjects'
// import { list1 } from '@/api/hmmm/directorys'
import { createAPI } from '@/utils/request'
// 城市列表数据获取
import { provinces, citys } from '@/api/hmmm/citys.js'
export default {
  name: 'questions-choice',
  data () {
    return {
      // loading效果
      searchLoading: false, // 搜索loading
      removeLoading: false, // 重置loading
      tablesLoading: false, // 表格loading
      choiceForm: {
        id: '', // 打开对话框传递的id值
        chkState: 1, // 审核是否通过
        chkRemarks: '' // 审核意见
      }, // 审核对话框
      key: false, // 控制视频显示
      questionRes: { // 预览对话框的试题详情数据
        questionType: null,
        id: null,
        difficulty: null,
        tags: null,
        subjectName: null,
        directoryName: null,
        direction: null,
        question: null,
        options: [],
        videoURL: null,
        answer: null,
        remarks: null
      }, // 试题详情
      choiceDialog: false, // 审核的对话框
      seeDialog: false, // 预览的对话框
      muluLists: [], // 二级目录列表
      subjectsList: [], // 学科列表
      labelLists: [], // 标签列表
      Managerlist: [], // 用户列表
      provincialLists: [], // 城市列表
      cityLists: [], // 城市区列表
      total_count: null,
      form: {
        page: 1,
        pagesize: 10,
        subjectID: null, // 学科id
        difficulty: null, // 难度
        questionType: null, // 试题类型
        tags: null, // 标签名称id
        province: null, // 企业所在省市
        city: null, // 企业所在城市
        keyword: null, // 关键词
        remarks: null, // 题目备注
        shortName: null, // 企业简称
        direction: null, // 方向
        creatorID: null, // 录入人
        catalogID: null, // 目录
        chkState: null // 审核状态
      },
      activeName: 'allTables',
      // 列表数据
      tableData: []
    }
  },
  watch: {
    seeDialog: function (newVal, val) {
      // console.log(val, newval)
      if (val === true) {
        // 当对话框关闭则视频关闭
        this.key = false
      }
    },
    'form.subjectID': function (newValue) {
      // 学科发生变化调取目录接口
      if (newValue) {
        console.log(newValue)
        this.form.catalogID = null
        this.form.tags = null
        console.log(newValue.toString())
        const id = newValue.toString()
        this.getDetail(id)
        this.getTabs(id)
      }
    },
    'form.province': function (newValue, val) {
      if (newValue) {
        console.log(newValue, val)
        // 用户选择了城市执行获取城市所在区列表
        this.getCityLists(newValue)
      }
      this.form.city = null
    }
  },
  created () {
    this.getQuestionsChoice() // 获取联动或需要的初始下拉数据
    this.getTables() // 初始化列表
  },
  methods: {
    // 时间过滤器
    // ...parseTimeByString,
    hAddText () { // 跳转新增试题页面
      this.$router.push('new')
    },
    hSizeChange (val) { // 分页组件方法-改变size
      this.form.page = 1
      console.log(val)
      this.form.pagesize = val
      this.getTables()
    },
    hCurrentChange (val) { // 分页组件实现实现跳页
      console.log(val)
      this.form.page = val
      this.getTables()
    },
    // ````````````初始化数据表格```````````
    async getTables () {
      this.tablesLoading = true
      try {
        const choiceLists = await choice(this.form)
        console.log('获取精选题库列表数据', choiceLists)
        this.tableData = choiceLists.data.items
        this.total_count = choiceLists.data.counts
        console.log('获取精选题库列表数据', this.tableData)
      } catch (err) {
        console.log(err)
        this.$message.error('获取数据失败')
      }
      this.tablesLoading = false
      this.searchLoading = false
      this.removeLoading = false
    },
    // 当城市出现时进行获取区
    async getCityLists (city) {
      const cityLists = citys(city)
      console.log('城市下属地区', cityLists)
      this.cityLists = cityLists
    },
    // 当有学科id变化时会侦听自动执行获取目录的方法
    async getDetail (newValue) {
      // 目录列表
      const list = await createAPI('/directorys', 'get', { page: 1, pagesize: 100, subjectID: newValue })
      console.log('标签列表', list)
      this.muluLists = list.data.items.map(({ id, directoryName }) => ({ id, directoryName }))
    },
    // 当有学科id变化时会侦听自动执行获取标签列表的方法
    async getTabs (newValue) {
      // 标签列表
      const list = await createAPI('/tags', 'get', { page: 1, pagesize: 100, subjectID: newValue })
      console.log('目录列表', list)
      this.labelLists = list.data.items.map(({ id, tagName }) => ({ id, tagName }))
    },
    async getQuestionsChoice () {
      console.log('这里是精选题库')
      // 获取学科列表 录入人
      const subjectRes = await list({ page: 1, pagesize: 100 })
      console.log('学科列表', subjectRes)
      // 使用map函数通过es6解构的形式去掉无用的数据 减轻服务器内存消耗
      this.subjectsList = subjectRes.data.items.map(({ id, subjectName }) => ({ id, subjectName }))
      console.log('学科列表参数', this.subjectsList)
      // 获取用户列表 录入人
      const Managerlist = await createAPI('/users', 'get', { page: 1, pagesize: 20 })
      console.log('用户列表', Managerlist)
      this.Managerlist = Managerlist.data.list.map(({ id, username }) => ({ id, username }))
      // 获取城市列表 获取省份
      const provincialLists = await provinces()
      console.log('省份', provincialLists)
      this.provincialLists = provincialLists
    },
    // 点击搜索
    async hsearch () {
      this.searchLoading = true
      // 重置页码
      this.form.page = 1
      this.form.pagesize = 10
      // console.log(typeof (form.catalogID) === 'string')
      this.getTables()
    },
    // tabs切换
    async htabsClick () {
      if (this.activeName === 'awaitStatusTables') {
        // 回到第一页 初始化携带的数据
        this.form.page = 1
        this.form.pagesize = 10
        this.form.chkState = 0
        this.getTables()
        // // 调接口查询列表
        // const choiceLists = await choice(this.form)
        // // 列表数据渲染
        // this.tableData = choiceLists.data.items.filter((item) => item.chkState === 0)
      } else if (this.activeName === 'allowStatusTables') {
        this.form.page = 1
        this.form.pagesize = 10
        this.form.chkState = 1
        this.getTables()
        // this.form.page = 1
        // const choiceLists = await choice(this.form)
        // this.tableData = choiceLists.data.items.filter((item) => item.chkState === 1)
      } else if (this.activeName === 'noStatusTables') {
        this.form.page = 1
        this.form.pagesize = 10
        this.form.chkState = 2
        this.getTables()
        // this.form.page = 1
        // const choiceLists = await choice(this.form)
        // this.tableData = choiceLists.data.items.filter((item) => item.chkState === 2)
      } else {
        this.form.page = 1
        this.form.pagesize = 10
        this.form.chkState = null
        this.getTables()
      }
    },
    // 表单重置
    resetForm (form) {
      this.removeLoading = true
      console.log('重置')
      this.$refs[form].resetFields() // 没有成功怎么办 没有prop属性 所以下面的表单手动不用清空了
      // console.log(this.form)
      this.activeName = 'allTables'
      this.cityLists = [] // 县级城市列表
      this.muluLists = [] // 二级目录列表
      this.labelLists = [] // 标签列表
      this.htabsClick()
      /*
        this.form = {
        page: 1,
        pagesize: 10,
        id: null, // 学科id
        subject: null, // 学科
        difficulty: null, // 难度
        questionType: null, // 试题类型
        tags: null, // 标签名称id
        province: null, // 企业所在省市
        city: null, // 企业所在城市
        keyword: null, // 关键词
        remarks: null, // 题目备注
        shortName: null, // 企业简称
        direction: null, // 方向
        creatorID: null, // 录入人
        catalogID: null, // 目录
        chkState: null // 审核状态}
      */
    },
    // ````````````````````预览 审核 修改 下架 删除``````````
    // 预览功能
    async hPreview (row) {
      this.seeDialog = true
      // 获取当前题目的详情信息
      try {
        const questionRes = await detail(row)
        this.questionRes = questionRes.data
        console.log('试题详情', this.questionRes)
      } catch (err) {
        console.log(err)
        this.$message.error('获取详情失败')
      }
    },
    // 审核功能-弹出对话框
    hReviewQuestion (row) {
      this.choiceForm.chkRemarks = ''
      this.choiceDialog = true
      this.choiceForm.id = row.id
    },
    // 审核确定 审核添加try catch 已完成
    async changeExamineQuestion () {
      try {
        if (this.choiceForm.chkRemarks) {
          // const { id, chkState, chkRemarks } = this.choiceForm
          // const from = {
          //   id,
          //   chkState,
          //   chkRemarks
          // }
          const statusChange = await choiceCheck(this.choiceForm)
          console.log(statusChange)
          this.getTables()
          this.choiceDialog = false
          this.$message.success('操作成功')
        } else {
          this.$message.warning('请输入审核意见')
        }
      } catch (err) {
        console.log(err)
        this.$message.error('操作失败')
      }
    },
    // 修改功能
    hModifyQuestion (row) {
      // 跳转到试题录入模块
      this.$router.push({
        path: 'new',
        query: {
          id: row.id
        }
      })
    },
    // 上下架
    upChange (row) {
      if (row.publishState === 1) {
        this.$confirm('您确认下架这道题目吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          const from = {
            id: row.id,
            publishState: 0
          }
          const res = await choicePublish(from)
          console.log('上下架是否成功', res)
          this.getTables()
          this.$message({
            type: 'success',
            message: '下架成功!'
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消下架'
          })
        })
      } else {
        this.$confirm('您确认上架这道题目吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          console.log(row.id, row.publishState)
          const from = {
            id: row.id,
            publishState: 1
          }
          const res = await choicePublish(from)
          console.log('上下架是否成功', res)
          this.getTables()
          this.$message({
            type: 'success',
            message: '上架成功!'
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消上架'
          })
        })
      }
    },
    // 删除
    removeQuestion (row) {
      this.$confirm('此操作将永久删除该题目，是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        console.log(row.id, row.publishState)
        const from = {
          id: row.id
        }
        const res = await remove(from)
        console.log('删除是否成功', res)
        this.getTables()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>

<style scoped lang='scss'>
  .el-icon-edit{
    margin-right: 4px;
  }
  .header{
    padding: 10px 0px;
    border-bottom: 0px solid #EBEEF5;
  }
  .el-select{
    width:100%;
  }
  .alert {
    margin: 10px 0px;
  }
  .pagination {
    margin-top: 10px;
  }
  .el-table th {
    background-color: #fafafa;
    overflow: scoll;
  }
  .el-table th.is-leaf {
    border-bottom: 2px solid #e8e8e8;
  }
  .disabled td {
    background-color: #f9f9f9;
    color: #c1c1c1;
  }
  .disabled .el-button--primary,
  .disabled .el-button--danger {
    background-color: #dbdada;
    border: 1px solid #dbdada;
    color: #999;
    cursor: not-allowed;
  }
  .anniu{
    padding: 0px;
    border: 0px;
    background-color: #fff;
    color: rgba(10, 84, 221, 0.5);
  }
  .el-radio{
    display: block;
    margin-top: 10px;
  }
</style>
